<template>
  <div class="music" v-if="!loading">
    <!-- 背景 -->
    <div class="musicBg" :style="`background-image: url(${music.al.picUrl});`"></div>

    <!-- 音乐标题 -->
    <div class="musicTitle">
      <span @click="$router.back()">
        <svg t="1657698134327" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2058" width="200" height="200" data-spm-anchor-id="a313x.7781069.0.i5">
          <path d="M677.391515 873.916768c-7.86101 0-15.618586-2.999596-21.617778-8.895354L324.473535 533.721212c-11.998384-11.894949-11.998384-31.340606 0-43.235555L655.670303 159.288889c5.999192-5.999192 13.756768-8.895354 21.617778-8.895354 7.757576 0 15.618586 2.999596 21.617778 8.895354 11.894949 11.894949 11.894949 31.237172 0 43.235555L389.223434 512.103434 698.905859 821.785859c11.894949 11.998384 11.894949 31.340606 0 43.235555-5.895758 5.895758-13.756768 8.895354-21.514344 8.895354z m0 0" p-id="2059" data-spm-anchor-id="a313x.7781069.0.i2" class="selected" fill="#e6e6e6"></path>
        </svg>
      </span>
      <p class="rowShows">{{ music.name }} </p>
    </div>

    <!-- 封面界面 -->
    <div class="cover" v-show="isShowInterface === 'cover'" @click.self="isShowInterface = 'lyric'">

      <div class="musicMain">
        <!-- 音乐唱片 -->
        <div class="musicRecord" :class="playState ? '' : 'animationPlay'" @click="changePlayState">
          <!-- 音乐封面 -->
          <div class="musicImg">
            <img :src="music.al.picUrl" alt="">
          </div>
        </div>

        <!-- 音乐播放按钮 -->
        <div class="musicPlay" v-show="!playState" @click="changePlayState"></div>

        <!-- 音乐臂 -->
        <div class="musicArm" :class="playState ? '' :'playPause' ">
          <img src="https://s3.music.126.net/mobile-new/img/needle-ab.png?4b81da043356110081e5ccaed2e6f2ad=" alt="">
        </div>
      </div>

      <!-- 媒体键 -->
      <div class="multimedia">
        添加到喜欢 / 下载 / 评论
      </div>
    </div>

    <!-- 歌词界面 -->
    <div class="lyric" v-show="isShowInterface === 'lyric'" @click="isShowInterface = 'cover'">
      <!-- 显示区域 -->
      <div class="showArea">
        <!-- 歌词 -->
        <ul style="transform: translateY(0px);">
          <li class="showRow" v-for="(item, i) in musicLyric" :key="i" :style="{
              color: currenIndex === i ? '#fff' : '#ccc',
              fontSize: currenIndex === i ? '3.5vw' : '3vw',
            }">
            {{ item.str }}
          </li>
        </ul>
      </div>
    </div>

    <!-- 按钮 -->
    <div class="buttons">
      <!-- 进度条 -->
      <div class="middle">
        <!-- <span class="currentDuration">{{ currentDuration | formatTime }}</span> -->
        <span class="currentDuration">{{ currentDuration | formatTime }}</span>
        <div class="progressBar">
          <div class="progressColor" :style="`width: ${progress}%;`">
            <i class="slider" :style="`left:${progress}%;`"></i>
          </div>

        </div>
        <span class="allDuration">{{ allDuration | formatTime }}</span>
      </div>

      <!-- 功能键 -->
      <!-- <div class="under">
        随机播放 / 上一首 / 暂停（播放）/ 下一首 / 歌曲列表
      </div> -->
    </div>

    <!-- 播放器 -->
    <audio id="audio" :src="musicUrl" @timeupdate="getDuration" loop></audio>
  </div>
</template>

<script>
export default {
  data () {
    return {
      // 页面加载
      loading: true,
      // 显示界面切换
      // cover：封面界面
      // lyric：歌词界面
      isShowInterface: 'cover',
      // 音乐详细信息
      music: {},
      // 音乐播放/下载地址
      musicUrl: '',
      // 歌词
      musicLyric: [],
      // 歌词高亮那句
      currenIndex: 0,
      // 当前播放状态
      playState: false,
      // 当前播放时间
      currentDuration: 0,
      // 歌曲总时长
      allDuration: 240,
    }
  },
  computed: {
    // 播放进度
    progress () {
      const progress = (this.currentDuration / this.allDuration * 100).toFixed(2)
      return progress
    }
  },

  mounted () {
    // 页面正在加载
    this.loading = true

    // 获取歌曲详情
    this.$api.getMusic(this.$route.params.id).then(res => {
      if (res.code === 200) {
        this.music = res.songs[0]
        this.allDuration = res.songs[0].dt

        // 页面结束加载
        this.loading = false
      }
    });

    // 获取歌词
    this.$api.getMusicLyric(this.$route.params.id).then(res => {
      if (res.code === 200) {
        // 把歌词进行拆分
        function parseLyric (str) {
          //先将字符串全部拆分开来得到每一行
          let tempArr = str.match(/\[(.*?):(.*?)\](.*?)\n/g);
          let arr = [];
          for (let temp of tempArr) {
            //对每一行进行拆分得到每一行中各个数据
            let tempItem = temp.match(/\[(.*?):(.*?)\](.*?)\n/);
            //将拆分好的数据push到新的数组中
            arr.push({
              time: timeEvent(tempItem[1] + ":" + tempItem[2]),
              str: tempItem[3],
            });
          }

          // 循环删除空白的歌词
          for (let i = 0; i < arr.length; i++) {
            if (arr[i].str == '') {
              arr.splice(i, 1)
            }
          }
          return arr;
        }

        // 把歌词时间转换为秒
        function timeEvent (e) {
          let time = e;
          var len = time.split(':');
          if (len.length == 3) {
            var hour = time.split(':')[0];
            var min = time.split(':')[1];
            var sec = time.split(':')[2];
            return Number(hour * 3600) + Number(min * 60) + Number(sec);
          }
          if (len.length == 2) {
            var min = time.split(':')[0];
            var sec = time.split(':')[1];
            return Number(min * 60) + Number(sec);
          }
          if (len.length == 1) {
            var sec = time.split(':')[0];
            return Number(sec);
          }
        };

        this.musicLyric = parseLyric(res.lrc.lyric)
        // console.log(this.musicLyric)
      }
    });

    // 音乐播放/下载地址
    this.musicUrl = this.$api.getMusicPlay(this.$route.params.id);
  },

  methods: {
    // 音乐暂停/播放
    changePlayState () {
      this.playState = !this.playState
      // 判断当前的播放状态，进行暂停或播放
      if (this.playState) {
        document.querySelector('#audio').play()
      } else {
        document.querySelector('#audio').pause()
      }
      console.log(this.playState);
    },

    // 获取当前播放时间
    getDuration () {
      const time = document.querySelector('#audio').currentTime
      this.currentDuration = time * 1000

      // 歌词滚动 开始

      // 获取 ul 和 li 元素
      const ul = document.querySelector('.showArea>ul')
      const liHeight = ul.querySelector('li').offsetHeight
      // 歌词渲染时间
      const currentTime = time.toFixed(1) - 0;
      // 歌词数组
      const arr = this.musicLyric;
      // 判断是否为歌词界面
      if (this.isShowInterface == 'lyric') {
        // 循环歌词数组
        for (let i = 0; i < arr.length; i++) {
          // 判断当前时间 是否大于 歌词的时间
          if (currentTime > arr[i].time) {
            // 高亮的那句
            this.currenIndex = i
            // 对歌词进行滚动，始终维持在第四句滚动
            ul.setAttribute('style', `transform: translateY(-${(i - 3) * liHeight}px);`)
          }
        }
      }

      // 歌词滚动 结束
    },

    /*
        // 按下鼠标
        downMouse (e) {
          console.log('按下');
          // // 记录下位置
          // this.x = e.clientX
          // this.y = e.clientY
          // pageX
    
          // // 偏移量
          // this.l = document.querySelector('.progressColor').offsetLeft
          // this.t = document.querySelector('.progressColor').offsetTop
        },
    
        // 移动鼠标
        moveMouse (e) {
          let x = e.pageX
          let y = e.pageY
          console.log(x, y);
    
          // 获取进度条的总宽度
          const el = document.querySelector('.progressBar')
          const width = parseFloat(window.getComputedStyle(el).width)
    
          // 获取进度条距离页面左侧的距离 
          const leftWidth = el.offsetLeft
    
    
          console.log(width);
          // console.log(leftWidth);
    
          const time = this.allDuration / 1000
          console.log(time);
    
          // 一个像素等于这么多时长
          console.log(time / width);
        }
    
        */
  },

  filters: {
    // 格式化时间
    formatTime (time) {
      const mm = parseInt(time / 1000 / 60) < 10 ? '0' + parseInt(time / 1000 / 60) : parseInt(time / 1000 / 60)
      const ss = parseInt(time / 1000 % 60) < 10 ? '0' + parseInt(time / 1000 % 60) : parseInt(time / 1000 % 60)
      return mm + ':' + ss
    }
  }
}
</script>

<style lang='less' scoped>
@keyframes play {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

// 界面
.music {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;

  // 背景
  .musicBg {
    position: absolute;
    width: 100%;
    height: 100%;
    // 去除模糊背景的白边
    transform: scale(1.15);
    background-color: #f8f8f8;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    filter: blur(5vw);
    z-index: -1;

    // 创建一个黑色遮罩
    &::after {
      content: '';
      display: block;
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      background-color: rgba(0, 0, 0, 0.3);
      transform: scale(1.5);
    }
  }
}

// 音乐标题
.musicTitle {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 7vh;
  color: #fff;
  z-index: 3;

  // 返回
  span {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 10vw;
    height: 100%;
    text-align: center;
    position: absolute;
    left: 0;

    svg {
      width: 40%;

      path {
        fill: #fff;
      }
    }
  }

  // 歌曲名
  p {
    width: calc(100% - 140px);
    text-align: center;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 4vw;
  }
}

// 封面 和 歌词界面的共同样式
.cover,
.lyric {
  position: absolute;
  top: 7vh;
  width: 100%;
  height: 83vh;
  overflow: hidden;

  @media screen {
    
  }
}

// 音乐主体
.musicMain {
  position: absolute;
  top: 20vh;
  left: 50%;
  width: 60vw;
  height: 60vw;
  transform: translateX(-50%);

  // 音乐唱片
  .musicRecord {
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-image: url(https://p5.music.126.net/obj/wo3DlcOGw6DClTvDisK1/4602256867/5855/63fb/325b/d7e4e3a244701ee85fecb5d4f6b5bd57.png?imageView=&quality=75&thumbnail=200y200);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    z-index: 3;

    // 动画
    animation-name: play;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-duration: 6s;
    animation-play-state: running;

    // 音乐封面
    .musicImg {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 40vw;
      height: 40vw;
      border-radius: 50%;
      overflow: hidden;
      z-index: 4;

      img {
        width: 100%;
        height: 100%;
      }
    }
  }

  // 动画暂停
  .animationPlay {
    animation-play-state: paused;
  }

  // 音乐播放按钮
  .musicPlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 13vw;
    height: 13vw;
    z-index: 5;
    background-image: url();
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: cover;
  }

  // 唱臂
  .musicArm {
    position: absolute;
    top: -33%;
    left: 50%;
    width: 20vw;
    transform: translateX(-3.187vw) rotate(0deg);
    transform-origin: 3.187vw 3.187vw;
    z-index: 6;
    transition: all 0.2s;

    img {
      width: 100%;
    }
  }

  // 暂停时的唱臂
  .playPause {
    transform: translateX(-3.187vw) rotate(-20deg) !important;
  }
}

// 媒体键
.multimedia {
  transform: scale(0);
}

// 歌词
.lyric {
  position: relative;
  text-align: center;
  color: #dedede;

  // 显示区域
  .showArea {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100vw;
    height: 50vh;
    overflow: hidden;
  }

  ul {
    transition: all 0.2s;

    li {
      line-height: 5vh;
      transition: all 0.2s;
    }
  }
}

// 按钮
.buttons {
  position: absolute;
  bottom: 0;
  width: 100vw;
  height: 10vh;

  // 进度条
  .middle {
    display: flex;
    justify-content: center;
    width: 100%;
    height: 100%;
    line-height: 10vh;

    // 当前的时间 和 总共时长
    .currentDuration,
    .allDuration {
      color: #e6e6e6;
      padding: 0 10px;
      font-size: 4vw;
    }

    // 进度条
    .progressBar {
      position: relative;
      top: 50%;
      transform: translateY(-50%);
      flex: 1;
      margin: 0 2vw;
      height: 1vw;
      border-radius: 0.5vw;
      background: #e6e6e6;

      // 进度条的已过颜色
      .progressColor {
        height: 1vw;
        border-radius: 0.5vw;
          background: #df2323;
      }

      // 滑块
      .slider {
        position: absolute;
        top: 50%;
        transform: translate(-7px, -50%);
        border-radius: 50%;
        display: block;
        width: 3vw;
        height: 3vw;
        background: #fff;

        &::after {
          display: block;
          content: '';
          width: 2vw;
          height: 2vw;
          border-radius: 50%;
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
          background: #df2323;
        }
      }
    }
  }
}
</style>
